layui.use(['jquery', 'layer', 'form'], function(){
let $ = layui.jquery;
let layer = layui.layer;
let form = layui.form;

function loadPackages() {
    $.ajax({
        url: './ajax/packagesgetDataList',
        type: 'GET',
        dataType: 'json',
        success: function(response) {
            if (response.code === 200) {
                const packages = response.data;

                let packageHtml = '';

                if (packages && packages.length > 0) {
                    packages.forEach(function(package) {
                        packageHtml += `
                            <div class="layui-col-md4" data-package-id="${package.id}">
                                <div class="package-card">
                                    <div class="package-header">
                                        <div class="package-title">${package.name}</div>
                                        <div class="package-price">￥${package.price}</div>
                                    </div>
                                    <div class="package-body">
                                        <ul class="package-details">
                                            <li>会员时长: ${package.days}天</li>
                                            <li>支付额度: ${package.quota}元</li>
                                            <li>套餐介绍: ${package.introduce}</li>
                                        </ul>
                                    </div>
                                    <div class="package-button-container">
                                        <button class="package-button buy-button" data-package-id="${package.id}">立即购买</button>
                                    </div>
                                </div>
                            </div>
                        `;
                    });

                    $('#packageContainer').html(packageHtml);
                    bindBuyButtonEvents(); 
                } else {
                    $('#packageContainer').html(`
                        <div class="no-package-found">
                            <i class="layui-icon layui-icon-face-cry" style="font-size: 50px; color: #999;"></i>
                            <div>暂无套餐，敬请期待!</div>
                        </div>
                    `);
                }
            } else {
                $('#packageContainer').html(`
                    <div class="no-package-found">
                        <i class="layui-icon layui-icon-close-circle" style="font-size: 50px; color: #999;"></i>
                        <div>api返回错误: ${response.msg}</div>
                    </div>
                `);
            }
        },
        error: function(xhr, status, error) {
            console.error("Failed to load packages:", error);
            $('#packageContainer').html(`
                <div class="no-package-found">
                    <i class="layui-icon layui-icon-unlink" style="font-size: 50px; color: #999;"></i>
                    <div>服务器链接失败</div>
                </div>
            `);
        }
    });
}

function bindBuyButtonEvents() {
    $('.buy-button').on('click', function() {
        const packageId = $(this).data('package-id');

        layer.open({
            type: 1,
            title: '选择支付方式',
            area: ['500px', '250px'],
            content: `
                <div style="padding: 20px;">
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">支付方式</label>
                            <div class="layui-input-block">
                                <input type="radio" name="type" value="alipay" title="支付宝" checked>
                                <input type="radio" name="type" value="wxpay" title="微信支付">
                                <input type="radio" name="type" value="qqpay" title="QQ支付">
                                </div>
                        </div>
                        <div class="layui-form-item" style="text-align: center;">
                            <button class="layui-btn" lay-submit lay-filter="confirm_payment">确认支付</button>
                        </div>
                    </form>
                </div>
            `,
            success: function(layero, index){
                form.render(); 

                form.on('submit(confirm_payment)', function(data){
                    const paymentMethod = data.field.type;

                    
                    $.ajax({
                        url: './ajax/submitPayment', 
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            id: packageId,
                            type: paymentMethod
                        },
                        success: function(response) {
                            if (response.code === 200) {
                                layer.closeAll(); // 关闭所有弹窗
                                layer.msg(response.msg, {
                                    icon: 1,
                                    time: 1000
                                }, function() {
                                    window.location.href = response.pay_url;
                                });
                               
                            } else {
                                layer.msg('支付失败: ' + response.msg, {icon: 2});
                            }
                        },
                        error: function(xhr, status, error) {
                            layer.msg('服务器错误！', {icon: 2});
                        }
                    });

                    return false; 
                });
            }
        });
    });
}

$(document).ready(function() {
    loadPackages();
});
});